<template>
  <v-container>
    <v-row class="text-right" justify="end">
      <v-col>
        <v-text-field
            v-model="pageRoleCategoryRequest.code"
            density="compact"
            variant="outlined"
            :label="$t('table.header.roleCategory.code')"
            :placeholder="$t('placeholder.roleCategory.code')"
            clearable :maxlength="addRoleCategoryValidationLength.code" :counter="addRoleCategoryValidationLength.code"
        />
      </v-col>
      <v-col>
        <v-text-field
            v-model="pageRoleCategoryRequest.name"
            density="compact"
            variant="outlined"
            :label="$t('table.header.roleCategory.name')"
            :placeholder="$t('placeholder.roleCategory.name')"
            clearable :maxlength="addRoleCategoryValidationLength.name" :counter="addRoleCategoryValidationLength.name"
        />
      </v-col>
      <v-col>
        <v-autocomplete
            v-model="pageRoleCategoryRequest.status" density="compact"
            variant="outlined" :label="$t('table.header.roleCategory.status')"
            :placeholder="$t('placeholder.roleCategory.status')" :items="statusList" item-title="name"
            item-value="code" clearable/>
      </v-col>
    </v-row>
    <v-row class="text-right" justify="end">
      <v-btn variant="text" append-icon="mdi-clipboard-plus">
        {{ $t('button.common.add') }}
      </v-btn>
      <v-btn variant="text" append-icon="mdi-database-search">
        {{ $t('button.common.search') }}
      </v-btn>
    </v-row>
    <v-table>
      <thead>
      <tr>
        <th v-for="header in headers" :key="header.key" class="text-center">
          {{ $t(useLanguageProperty(header)) }}
        </th>
        <th class="text-center">
          {{ $t('text.common.operation') }}
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="roleCategory in resourceCategoryList" :key="roleCategory.id">
        <td v-for="header in headers" :key="header.key" class="text-center">
          {{ useProperty(roleCategory, header) }}
        </td>
        <td class="text-center">
          <v-btn variant="text" append-icon="mdi-lead-pencil">
            {{ $t('button.common.edit') }}
          </v-btn>
          <v-btn variant="text" append-icon="mdi-lock">
            {{ $t('button.common.disabled') }}
          </v-btn>
          <v-btn variant="text" append-icon="mdi-lock-open">
            {{ $t('button.common.enabled') }}
          </v-btn>
        </td>
      </tr>
      </tbody>
    </v-table>
    <v-pagination
        v-model="currentPage"
        :length="totalPage"
        :total-visible="totalVisible" rounded="circle"
    />
  </v-container>
</template>
<script setup lang="ts">
import {LAYOUT_MAIN, TITLE_RESOURCE_CATEGORY} from "~/resource/constants/common/constant";
import {Dictionary} from "~/resource/types/common/dictionary";
import {PageRoleCategoryRequest} from "~/resource/types/role/page-role-category-request";
import {AddRoleCategoryValidation} from "~/resource/types/role/add-role-category-validation";
import {ResourceCategory} from "~/resource/types/resource/resource-category";
import {resourceCategoryHeaders} from "~/resource/constants/tables/resource";

definePageMeta({
  layout: LAYOUT_MAIN,
  title: TITLE_RESOURCE_CATEGORY
});
const appConfig = useAppConfig();
const currentPage = ref<number>(appConfig.page?.defaultCurrentPage || 0);
const totalVisible = ref<number>(appConfig.page?.defaultTotalVisible || 0);
const totalPage = ref<number>(0);
const headers = ref(showTableHeader(resourceCategoryHeaders));
const resourceCategoryList = ref<Array<ResourceCategory>>([]);
const statusList = ref<Array<Dictionary>>([]);
const pageRoleCategoryRequest = ref<PageRoleCategoryRequest>(new PageRoleCategoryRequest(null, null, null));
const addRoleCategoryValidationLength = ref<AddRoleCategoryValidation>(new AddRoleCategoryValidation(appConfig.validation.common.codeMaxLength, appConfig.validation.common.nameMaxLength))
const selectRoleCategoryPage = () => {
  //resourceCategoryList.value.push(new ResourceCategory("分类", "0003", 1));
  totalPage.value = 1;
}
const getStatusList = () => {
  statusList.value.push(new Dictionary("启用", "0001"));
  statusList.value.push(new Dictionary("禁用", "0002"));
  selectRoleCategoryPage();
}
getStatusList();
watch(currentPage,
    () => {
      selectRoleCategoryPage();
    }
)

</script>